<template>
  <el-carousel class="mySwiper" ref="myswiper">
    <el-carousel-item
      v-for="item in SwiperItems"
      :key="item.id"
    >
      <a :href="item.url">
        <img
          class="swiperImg"
          :src="item.img"
          alt=""
          @touchend="touchend"
          @touchstart="touchstart"
        />
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  date() {
    return {
      stateX: 0,
    };
  },
  name: "mySwiper",
  props: ["SwiperItems"],
  methods: {
    touchstart(event) {
      this.startX = event.changedTouches[0].pageX;
    },

    touchend(event) {
      let start = event.changedTouches[0].pageX;
      let num = start - this.startX;
      if(num<0) {
        this.$refs.myswiper.next()
      }else {
         this.$refs.myswiper.prev()
      }
    },
  },
};
</script>
<style>
.mySwiper {
  width: 95%;
  height: 100%;
  margin: 0 auto;
  border-radius: 0.625rem;
  overflow: hidden;
}

.el-carousel__indicators {
  display: flex;
  height: 1.3rem;
  justify-content: space-around;
}
.el-carousel__button {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: #999;
}
.el-carousel__container {
  width: 100%;
  height: 100% !important;
}
.is-active button {
  background: #ff6600;
}
.el-carousel__arrow {
  display: none;
}

.swiperImg {
  width: 100%;
  height: 7.5rem;
  border-radius: 0.625rem;
}
</style>